@extends('layouts.app')

@section('content')
<div class="container defaultFontSize">
    <div class="row">
        <div class="col-md-8 col-md-offset-2" style="margin-bottom: 80px;">
            <div class="panel panel-default">
                <div class="panel-body">
                    <span class="left">余额:<i>0.06</i>元</span>
                    <span class="right">持仓盈亏：<i>0.00</i>元</span>
                </div>
            </div>
            
            <div class="panel panel-default">
                <div class="panel-body">
                    <!-- Nav tabs -->
					<ul id="myTab" class="nav nav-tabs agent-flex" role="tablist">
					  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">下单</a></li>
					  <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">持仓</a></li>
					  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">结算</a></li>
					</ul>
					
					<!-- Tab panes -->
					<div class="tab-content">
						<!--下单-->
						<div role="tabpanel" class="tab-pane active" id="home">
							<div class="business-subject clearfix">
								<div class="col-xs-7 business-title business-titlelinhe paddingrightnone">
									{{ $option->name }}
									<span id="price">{{ $optionData['last_price'] }}</span>
								</div>
								<div class="col-xs-5 business-title business-titlepadding">
									<span class="col-xs-12" id="up">-209.00</span>
									<span class="col-xs-12" ><span id="ups">-0.08</span>%</span>
								</div>
								<div class="col-xs-12 business-titleborderbottom ">
									<div class="col-xs-6 text-left clearpadding">卖价<span id="BP">23477.00</span></div>
									<div class="col-xs-6 text-right clearpadding">买价<span id="SP">23477.00</span></div>
								</div>
							</div>
							<!--canvs-->
							<div class="panel panel-default" style="margin-top: 20px;">
                				<div class="panel-body">
                					<!-- Nav tabs -->
									<ul class="nav nav-tabs" role="tablist">
									  <li role="presentation" class="active"><a href="#kline" role="tab" data-toggle="tab">分时图</a></li>
									  <li role="presentation"><a href="#fenshi" role="tab" data-toggle="tab">K线图</a></li>
									</ul>
									<!-- Tab panes -->
									<div class="tab-content">
									  <div role="tabpanel" class="tab-pane active" id="kline">
									  	<svg id="svgbox" class="svgbox" version="1.1" xmlns="http://www.w3.org/2000/svg">
								        	<g>
								        		<!--0--><text x="5" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>17:00</tspan></text>
								        		<!--1--><text x="10" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>9:00</tspan></text>
								        		<!--2--><text x="116" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>13:00</tspan></text>
								        		<!--3--><text x="10" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>16:15</tspan></text>
								        		<!--4--><text x="15" y="240" fill="#d0402d" style="text-anchor: start;font-size:8pt"><tspan>最高价</tspan></text>
								        		<!--5--><text x="15" y="240" fill="#d0402d" style="text-anchor: start;font-size:8pt"><tspan>最低价</tspan></text>
								        		<!-- --><line x1='' y1='' x2='' y2='' stroke="red" stroke-dasharray="3,3"></line>
								        	</g>
								        	<g>
								        		<path stroke="none" fill="#3083ca" fill-opacity="0.2" d="M 0,140 L150,140Z"></path><!--线-->
								        		<path stroke="#3083ca" fill="none" d="M 0,140 L150,140Z"></path><!--图-->
								        	</g>
								        	<g>

								        	</g>
								        </svg>
									  </div>
									  <div role="tabpanel" class="tab-pane" id="fenshi">
									  		<svg id="svgfie" class="svgbox" version="1.1" xmlns="http://www.w3.org/2000/svg">
									        	<g>
									        		
									        	</g>
									        	<g>
									        		<text x="5" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>17:00</tspan></text><!--最高-->
								        			<text x="10" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>9:00</tspan></text><!--最低-->
									        	</g>
									        	<g>
									        		<text x="5" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>17:00</tspan></text><!--1-->
								        			<text x="10" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>9:00</tspan></text><!--2-->
								        			<text x="5" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>17:00</tspan></text><!--3-->
								        			<text x="10" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>9:00</tspan></text><!--4-->
								        			<text x="5" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>17:00</tspan></text><!--5-->
								        			<text x="10" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>9:00</tspan></text><!--6-->
									        	</g>
									        	<g></g>
									        	<g></g>
									        	<g></g>
									        </svg>
									  </div>
									</div>
                				</div>
                			</div>
                			<div class="col-xs-12 col-md-12 business-fixed">
                				<div class="col-xs-6 col-md-6"><button id="rise" type="button" class="btn btn-danger">看涨</button></div>
                				<div class="col-xs-6 col-md-6"><button id="fall" type="button" class="btn btn-success">看跌</button></div>
                			</div>
                			<!-- Modal -->
							<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							  <div class="modal-dialog">
							    <div class="modal-content">
							      <div class="modal-header">
							      	<div class="timehide clearfix">
							      		<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
							        	<h4 class="modal-title" id="myModalLabel">下单</h4>
							      	</div>
							      	<div class="timeshow clearfix m5">
							      		<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
							        	<h4 class="modal-title" id="myModalLabel">订单状态</h4>
							      	</div>
							      	<div class="error clearfix">
							      		<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
							        	<h4 class="modal-title err1" id="myModalLabel">订单状态</h4>
							      	</div>
							      </div>
							      <div class="modal-body clearfix">
							      	<div  class="timehide clearfix">
							      		<div class="col-md-8 fonsize2 padding3">
								      		{{ $option->name }}
								      	</div>
								      	<div class="dropdown col-md-8 clearfix padding3">
								      		<div class="col-xs-6 business-model text-right clearpadding">到期时间</div>
								      		<div class="col-xs-6 text-left clearpadding paddingleft">
								      			<button id="dLabelx" class="btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
											    <span class="itemx">60秒</span>
													<span class="caret"></span>
												</button>
											  	<ul class="dropdown-menu business-hideli" role="menu" aria-labelledby="dLabelx">
										    		<li>60秒</li>
										    		<li>300秒</li>
										    		<li>900秒</li>
										    		<li>1800秒</li>
										    		<li>3600秒</li>
										    	</ul>
								      		</div>
										</div>
										<div class="dropdown col-md-8 clearfix magintop10 padding3">
								      		<div class="col-xs-6 business-model text-right clearpadding">投资金额</div>
								      		<div class="col-xs-6 text-left clearpadding paddingleft">
								      			<button id="dLabels" class="btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
											    	<span class="itemx">50元</span>
													<span class="caret"></span>
												</button>
											  	<ul class="dropdown-menu business-hideli" role="menu" aria-labelledby="dLabels">
										    		<li>50元</li>
										    		<li>100元</li>
										    		<li>200元</li>
										    		<li>500元</li>
										    	</ul>
								      		</div>
										</div>
										<div class="dropdown col-md-8 clearfix magintop10 padding3">
								      		<div class="col-xs-6 business-model text-right clearpadding">潜在收益率<span id="rate">0.85</span>%</div>
								      		<div class="col-xs-6 business-model text-left clearpadding paddingleft">
								      			潜在收益<span id="ratex">92.5</span>元
								      		</div>
										</div>
										<div class="dropdown col-md-8 clearfix magintop10 padding3">
								      		及时执行(最新执行价<span id="buynowshow">23403.00</span>)
										</div>
							      	</div>
							      </div>
							      <div class="timeshow clearfix">
								      	<div class="col-xs-12 col-md-12 m1">60</div>
								      	<div class="col-xs-6 col-md-6 m2">执行价格:<span>23245.20</span></div>
								      	<div class="col-xs-6 col-md-6 m3 publicpoint">当前价格:<span>23245.20</span></div>
							      </div>
							      <div class="error error-message err2">
							      		
							      </div>
							      <div class="modal-footer">
							      	<div class="timehide clearfix">
							      		<div class="col-xs-12 text-center risesend"><button id="risesend" type="button" class="btn btn-danger col-xs-12">看涨</button></div>
                						<div class="col-xs-12 text-center fallsend"><button id="fallsend" type="button" class="btn btn-success col-xs-12">看跌</button></div>
							      	</div>
							      	<div class="timeshow clearfix">
							      		<div class="col-xs-6 col-md-6 m4">订单方向<span>买涨</span></div>
							      		<div class="col-xs-6 col-md-6 m4">预测结果<span>亏</span></div>
							      		<div class="col-xs-12 col-md-12"><button type="button" class="m6 btn btn-danger col-xs-12">继续下单</button></div>
							      	</div>
							      	<div class="error button-back">
							      		<button type="button" class="button button-back err3">重新下单</button>
							      	</div>
							      </div>
							    </div>
							  </div>
							</div>
							<!--script-->
						</div>
<!--持仓-->
<div role="tabpanel" class="tab-pane" id="profile">
	<div class="panel panel-default">
	  <div class="panel-heading "><span class="publicred publicdirection">买涨</span><span class="right">1952-60-60 16.30.30</span></div>
	  <div class="panel-body">
	     <div class="clearfix option"><span class="left">金额:<b>500</b>元</span><span class="right">执行价<b cite="publicbuy">23326.00</b></span></div>
	     <div class="clearfix option"><span class="left">收益:<b>85%</b></span><span class="right">当前价<b class="publicpoint">23326.00</b></span></div>
	     <div class="clearfix option"><span class="left">剩余:<b class="publictime">85</b></span><span class="right">预测结果<b class="publicresult">盈</b></span></div>
	  </div>
	</div>
</div>
<!--结算-->
<div role="tabpanel" class="tab-pane" id="messages">
	<div class="panel panel-default">
	  <div class="panel-heading "><span class="publicred publicdirection">买涨</span><span class="right">1952-60-60 16.30.30</span></div>
	  <div class="panel-body">
	     <div class="clearfix option"><span class="left">金额:<b>500</b>元</span><span class="right">执行价:<b cite="publicbuy">23326.00</b></span></div>
	     <div class="clearfix option"><span class="left">收益:<b>85%</b></span><span class="right">结算价:<b class="publicpoint">23326.00</b></span></div>
	     <div class="clearfix option"><span class="left">时长:<b class="publictime">85</b></span><span class="right">结果:<b class="publicresult">盈+150</b></span></div>
	  </div>
	</div>
</div>
						
					</div>
                </div>
            </div>
        </div>
    </div>
    
<script type="text/javascript">
	$('.timehide').hide();
	$('.error').hide();
	//5分钟图的大小
	$('#svgfie').width($('#svgbox').parent().width()).height($('#svgbox').parent().width()*3/4);
	setInterval('nowjson(2)',500);
	var urlfen="{{ url('getperioddata',['symbol'=>$option->code]) }}",//分时图url
	temp = {60:0.85,300: 0.82,900: 0.80,1800: 0.78,3600: 0.76},//点击时间和金额时，收益及收益率变动
		urltime="{{ url('getdata',['symbol'=>$option->code]) }}?t="+Math.random(),//点数url
		svg = {'lang':765,'b1':'17:00','b2': '09:00','b3': '13:00','b4':'16:15','p1':0.5,'p2':0.75},//lang：总时长  b1：开始时间  b2：中间时间1  b3：中间时间3  b4：结束时间   p1：中间1值   p2：中间2值
		timetest = {!! $newtimes !!},//分时图时间段
		svgdataname = ['TimeTrend','Volume'],//svgdataname[0]:path数组下标  svgdataname[1]：line数组下标
		urlfie="{{ url('/getklinedata',['symbol'=>$option->code,'time'=>5]) }}",//5分钟图url
		fiesvg = {'lang':168,'p1':0.4821,'p2':0.75},//5分钟图设置
		price=$('#price'),//当前点数
		up=$('#up'),//点数变化
		ups=$('#ups'),//点数百分比
		BP=$('#BP'),//卖出点数
		SP=$('#SP'),//买入点数
		heuyueid={{ $option->id }},//合约ID
		urlgt="{{ url('/order/insert') }}",//持仓url
		token='{{csrf_token()}}';//token
		var orderurl = "{{ url('/getorderdata') }}";
</script>
<script src="{{ asset('javascript/pageajax.js') }}"></script>
<script src="{{ asset('javascript/delsvg.js') }}" type="text/javascript" charset="utf-8"></script>    
    
</div>
@endsection
